


IO7 Text Messages

by dentigerous



Category: Original Work
Genre: Coding, Text Messages, Texting, Texts From Last Night, codes, hopefully it's public soon!, this code is totally free to use!, this is a code test!
Language: English
Status: Completed
Published: 2017-08-18
Updated: 2017-08-19
Packaged: 2018-12-17 02:50:02
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 584
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/11842407
Author URL: https://archiveofourown.org/users/dentigerous/pseuds/dentigerous
Summary: a workskin for AO3 so you can have text messages in your fic look like IO7 texts!





	1. Chapter 1

hey babe. i've had such a long day it's been the worst. please tell me that you're home i need some tea and netflix.

new phone, who's this

OH NO

you better not have i swear to god

oh god, i'm sorry, please stop

come over, there's dinner

Not. Funny.


	2. Chapter 2

**Summary for the Chapter:**

> How to do it!

Hopefully this workskin will be public soon (i'll update this when/if it is), but if it's not, or if you want to use this in conjunction with other CSS customizations, this is how you create the text messages in the first chapter.

First, create a workskin by going to your dashboard, clicking Skin>My Work Skins>Create New skin

You can title it anything you want, if you just want a general text message template, you should just call it 'text messages' or something like that. Otherwise i recommend titling your skin the title of your fic.

In the CSS box, cut and paste the following:

#workskin body {  
background: none repeat scroll 0 0 #fff;  
color: #FFFFFF;  
font-family: "Open Sans";  
line-height: 26px;  
max-width: 400px;  
margin: 0 auto;  
overflow-x: hidden;  
position: relative;  
}

#workskin .left {  
position: absolute;  
top: 0;  
left: 35px;  
font-size: 18px;  
}

#workskin .left:after {  
border: 3px solid #2095FE;  
border-right: 3px solid transparent;  
border-top: 3px solid transparent;  
content: " ";  
height: 14px;  
left: -20px;  
position: absolute;  
top: 20px;  
-webkit-transform: rotate(45deg);  
-moz-transform: rotate(45deg);  
transform: rotate(45deg);  
width: 14px;  
}

#workskin .right {  
position: absolute;  
top: 0;  
right: 15px;  
font-size: 18px;  
}

#workskin .messages-wrapper {  
max-width: 400px;  
position: relative;  
border: 1px solid #ddd;  
}

#workskin .message {  
max-width: 400px;  
border-radius: 20px 20px 20px 20px;  
margin: 0 15px 10px;  
padding: 10px 20px;  
position: relative;  
}

#workskin .message.to {  
background-color: #2095FE;  
color: #fff;  
margin-left: 80px;  
}

#workskin .message.from {  
background-color: #E5E4E9;  
color: #363636;  
margin-right: 80px;  
}

#workskin .message.to + .message.to,  
#workskin .message.from + .message.from {  
margin-top: -7px;  
}

#workskin .message:before {  
border-color: #2095FE;  
border-radius: 50% 50% 50% 50%;  
border-style: solid;  
border-width: 0 20px;  
bottom: 0;  
clip: rect(20px, 35px, 42px, 0px);  
content: " ";  
height: 40px;  
position: absolute;  
right: -50px;  
width: 30px;  
z-index: -1;  
}

#workskin .message.from:before {  
border-color: #E5E4E9;  
left: -50px;  
transform: rotateY(180deg);  
}

Great! Now in your fic, make sure that you set the workskin! You do this by editing your fic - not the chapter - OR when you first set up your fic. The little box is under 'associations', where you post to collections, gift works, chose your language, etc. Set your workskin to whatever you named your text messagete template!

Then! In your fic, you want to use the following code format so you can get a good feeling for what it will look like in your fic. AO3 will add in paragraph tags on its own, so it might take some getting used to. I would recommend adding this only after you've got everything sorted out. the message to is blue, message from is gray.

<div class="messages-wrapper">  
<div class="message to"> hey babe. i've had such a long day it's been the worst. please tell me that you're home i need some tea and netflix</div>  
<div class="message from">new phone, who's this</div>  
<div class="message to">OH NO</div>  
<div class="message to">you better not have i swear to god</div>  
<div class="message from">oh god, i'm sorry, please stop</div>  
<div class="message from">come over, there's dinner</div>  
<div class="message to">Not. Funny.</div>  
</div>

Leave any questions in the comments and I'll help you out!

I would also love it if you shared where this code was used! Rec your texts in the comments, please. : )


End file.
